<template>
  <div>
    <div style="padding: 15px 15px 100px 15px; background: #fff;">
      <div class="header flex-row">
        <span class="flex-row-ver cur" @click="toPage(1)"><i>1</i>门店信息</span>
        <span class="flex-row-ver cur" @click="toPage(2)"><i>2</i>资质信息</span>
        <span class="flex-row-ver cur"><i>3</i>合作方案</span>
      </div>
      <div v-if="!$route.query.id" class="tell">您还没有完成上一步,请从第一步开始编辑，否在无法提交</div>
      <el-row class="item">
        <el-form :model="params" :rules="rules" ref="ruleForm"
          label-width="130px" class="demo-ruleForm" size="small">
          <el-row class="title">
            <el-form-item label="是否绑定银行卡" required style="margin-bottom: 0;">
              <el-tooltip effect="dark" content="用于商家申请提现打款" placement="top-start">
                <el-button type="text" icon="el-icon-question"></el-button>
              </el-tooltip>
              <el-radio v-model="params.bindingBank" :label="true">绑定</el-radio>
              <el-radio v-model="params.bindingBank" :label="false">不绑定</el-radio>
            </el-form-item>
          </el-row>
          <div class="list" v-if="params.bindingBank">
            <el-form-item label="真实姓名" prop="establishname">
              <el-input v-model="params.establishname" placeholder="请输入提现银行所属人" clearable />
            </el-form-item>
            <el-form-item label="银行卡号" prop="account">
              <el-input v-model="params.account" placeholder="请输入提现银行卡号" clearable />
            </el-form-item>
            <el-form-item label="银行类型" prop="bankname">
               <el-input v-model="params.bankname" placeholder="请输入银行类型未填" clearable />
            </el-form-item>
            <el-form-item label="支行信息" prop="branchname">
              <el-input v-model="params.branchname" placeholder="请输入支行信息" clearable />
            </el-form-item>
          </div>
          <el-row class="title" style="margin-top: 15px;">
            <el-form-item label="是否绑定支付宝" required style="margin-bottom: 0;">
              <el-tooltip effect="dark" content="用于商家申请提现打款" placement="top-start">
                <el-button type="text" icon="el-icon-question" />
              </el-tooltip>
              <el-radio v-model="params.bindingzfb" :label="true">绑定</el-radio>
              <el-radio v-model="params.bindingzfb" :label="false">不绑定</el-radio>
            </el-form-item>
          </el-row>
          <div class="list" v-if="params.bindingzfb">
            <el-form-item label="支付宝账号" prop="payeeaccount">
              <el-input v-model="params.payeeaccount" placeholder="请输入支付宝账号" clearable />
            </el-form-item>
            <el-form-item label="支付宝账号姓名" prop="payeerealname">
              <el-input  v-model="params.payeerealname"
                placeholder="请正确输入对应支付宝实名认证的姓名，否则无法打款" clearable />
            </el-form-item>
          </div>
           <el-row class="title" style="margin-top: 15px;">
            <el-form-item v-if="agentId != 5245" label="绑定微信" style="margin-bottom: 0;">
               <el-tooltip effect="dark" content="用于商家申请提现打款" placement="top-start">
                  <el-button type="text" icon="el-icon-question" />
                </el-tooltip>
                <span>http://h5.jiaowawang.cn/bindWxCash?agentId={{agentId}}</span>
                <el-button type="text" @click="copyText(`http://h5.jiaowawang.cn/bindWxCash?agentId=${agentId}`)">复制</el-button>
                <p>将此链接在<strong>微信中</strong>发送给所有商家，让商家自助绑定</p>
            </el-form-item>
          </el-row>
          <el-form-item label="配送方式" required style="margin-top: 20px">
            <el-radio v-model="params.isdeliver" :label="0">平台专送</el-radio>
            <el-radio v-model="params.isdeliver" :label="1">商家自配送</el-radio>
          </el-form-item>
          <el-form-item label="配送区域" prop="bdistrange" v-if="params.isdeliver === 1">
            <el-button size="mini" @click="cavMap()">{{params.bdistrange ? '查看':'添加'}}配送区域</el-button>
          </el-form-item>
          <el-form-item label="自配送费" prop="busshowps" v-if="params.isdeliver === 1">
            <el-row type="flex">
              <el-input-number style="margin-right: 10px" v-model="params.busshowps" :min="0" :max="9999" :precision="2" />元
            </el-row>
          </el-form-item>
          <el-form-item label="抽佣比例" prop="coefficient">
            <el-row type="flex">
              <el-input-number style="margin-right: 10px" v-model="params.coefficient" :min="0" :max="100" :precision="1" />%
            </el-row>
          </el-form-item>
          <el-form-item label="提现周期" prop="period">
            <el-row type="flex">
              <el-input-number style="margin-right: 10px" v-model="params.period" :min="0" :max="999" :precision="0" />天
            </el-row>
          </el-form-item>

          <el-form-item label="最低提现" prop="minmonety">
            <el-row type="flex">
              <el-input-number style="margin-right: 10px" v-model="params.minmonety" :min="0" :max="10000" :precision="2" />元
            </el-row>
          </el-form-item>
          <el-form-item label="打包时间" prop="packtime">
            <el-row type="flex">
              <el-input-number style="margin-right: 10px"  v-model="params.packtime" :min="1" :max="1000" :precision="0" />分
            </el-row>
          </el-form-item>
          <el-form-item label="起送价" prop="startpay">
            <el-row type="flex">
              <el-input-number style="margin-right: 10px" v-model="params.startpay" :min="0" :max="10000" :precision="2" />元
            </el-row>
          </el-form-item>
          <el-form-item label="满足起送价条件" required>
            <el-radio v-model="params.startpaymode" :label="true">折前价满足</el-radio>
            <el-radio v-model="params.startpaymode" :label="false">折后价满足</el-radio>
          </el-form-item>
          <el-form-item label="自取" required style="margin-bottom: 0;">
            <el-switch v-model="params.suportself" active-color="#13ce66" />
          </el-form-item>
          <el-form-item label="是否预订单" required style="margin-bottom: 0;">
            <el-radio v-model="params.bookable" :label="true">是</el-radio>
            <el-radio v-model="params.bookable" :label="false">否</el-radio>
          </el-form-item>
          <el-form-item label="抽点方式">
            <el-radio v-model="params.drawmode" :label="1">打折前</el-radio>
            <el-radio v-model="params.drawmode" :label="0">打折后</el-radio>
          </el-form-item>
          <el-form-item style="margin-top: 40px">
            <el-button @click="toPage(2)">返回上一步</el-button>
            <el-button type="primary" :loading="issubmitLoading" @click="submitForm('ruleForm')">确认提交</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div v-if="infoLoading" class="info-loading-addShop"></div>
    </div>
  </div>
</template>
<script>
  var bankList = [
   '中国工商银行', '中国建设银行', '招商银行', '中国农业银行', '交通银行', '中国银行', 
   '广发银行', '华夏银行', '兴业银行', '光大银行', '浦东发展银行', '邮政银行','北部湾银行',
   '桂林银行', '农村合作信用社', '柳州银行', '徽商银行', '民生银行']
  export default {
    data() {
      return {
        issubmitLoading: false, //提交等待
        infoLoading: false, //页面等待info数据
        agentId: '', // 代理商id
        params: {
          bindingBank: true, // 是否绑定银行卡
          establishname: '', // 开户名
          account: '', // 提现账号
          bank: '', // 支行名 旧数据兼容
          bankname: '', // 支行名
          isdeliver: 0, // 配送方式 0快车，1自配送
          bdistrange: '', // 配送区域
          coefficient:undefined, // 抽佣比例
          drawmode: 1, // 抽点
          busshowps:undefined,  //自配送价格
          period:undefined, //提现周期
          minmonety:undefined, //最低提现
          packtime: undefined, //打包时间
          startpay:undefined, //起送价
          startpaymode: false, // 满足起送价条件
          suportself: true, //是否支持自取
          bookable: true, //是否预定
          branchname: '', //支行信息
          bindingzfb: true, // 是否绑定支付宝
          payeeaccount: '', // 支付宝账号
          payeerealname: '' // 支付实名认证姓名
        },
        centerPoint: {}, // 商家经纬度
        rules: {
          establishname: [{required: true, message: '真实姓名未填', trigger: 'blur'}],
          account: [{required: true, message: '银行卡号未填', trigger: 'blur'}],
          bankname: [{required: true, message: '银行类型未填', trigger: 'change'}],
          branchname: [{required: true, message: '支行信息未填', trigger: 'blur'}],
          bdistrange: [{required: true, message: '配送区域未绘制', trigger: 'change'}],
          coefficient: [{required: true, message: '抽佣比例未填', trigger: 'blur'}],
          busshowps: [{required: true, message: '自配送费未填', trigger: 'blur'}],
          period: [{required: true, message: '提现周期未填', trigger: 'blur'}],
          minmonety: [{required: true, message: '最低提现额度未填', trigger: 'blur'}],
          packtime: [{required: true, message: '打包时间未填', trigger: 'blur'}],
          startpay: [{required: true, message: '起送价未填', trigger: 'blur'}],
          payeeaccount: [{required: true, message: '商家电话未填写', trigger: 'blur'}],
          payeerealname: [{required: true, message: '支付宝真实姓名未填', trigger: 'blur'}],
        },
      }
    },
    methods: {
      toPage(page) {
        const id = this.$route.query.id
        if (page == '1' && id) {
          this.$router.push({path: '/main/busnt/add1', query: {id: id}})
        } else if (page == '2' && id) {
          this.$router.push({path: '/main/busnt/add2', query: {id: id}})
        }
      },
      getShopList() {
        const params = {id: this.$route.query.id}
        this.infoLoading = true
        this.$http.get('/server/business/info?' + this.qs.stringify(params), {headers: {isCancel: true}}).then(res => {
          if (res.data.success) {
            const row = res.data.data
            this.centerPoint = { lng: row.longitude, lat: row.latitude }
            this.agentId = row.areaAgentId || row.agentid
            this.params.bindingBank = row.bindingBank || false
            this.params.bindingzfb = row.bindingzfb || false
            this.params.establishname = row.establishname || ''
            this.params.account = row.account || ''
            this.params.bankname = row.bank ? bankList[row.bank - 1]: row.bankname
            this.params.isdeliver = row.isdeliver || 0
            this.params.coefficient = row.coefficient >= '0' ? row.coefficient: undefined
            this.params.busshowps = row.busshowps >= '0' ? row.busshowps: undefined
            this.params.period = row.period >= '0' ?  row.period: undefined
            this.params.minmonety = row.minmonety >= '0' ? row.minmonety : undefined
            this.params.packtime = row.packtime >= '0' ? row.packtime: undefined
            this.params.startpay = row.startpay >= '0' ? row.startpay: undefined
            this.params.suportself = row.suportself || false
            this.params.bookable = row.bookable || false
            this.params.drawmode = row.drawmode || 0
            this.params.branchname = row.branchname ||''
            this.params.payeeaccount = row.payeeaccount ||''
            this.params.payeerealname = row.payeerealname || ''
            this.params.bdistrange = row.bdistrange
            this.params.startpaymode = Boolean(row.startpaymode)
          }
        }).finally(() => { this.infoLoading = false })
      },
      submitForm(formName) { //提交数据
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params }
            if (!this.params.bindingBank) {
              params.establishname = ''
              params.account = ''
              params.bank = ''
            }
            if (!this.params.bindingzfb) { // 未绑定清空支付宝信息
              params.payeeaccount = ''
              params.payeerealname = ''
            }
            if (this.params.isdeiver == '0') {
              params.busshowps = ''
            }
            params.id = this.$route.query.id
            params.updateflage = 3
            this.issubmitLoading = true
            this.$http.post('/server/business/update', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '提交成功'})
                this.$router.push({path: '/main/busnt/list'})
              }
            }).finally(() => { this.issubmitLoading = false })
          } else {
            this.$message.error('有不合法的输入，请检查页面修改再提交')
            return false
          }
        })
      },
      cavMap() { // 绘制地图
        const option = {
          bdistrange: this.params.bdistrange,
          searchName: '',
          lng: this.centerPoint.lng,
          lat: this.centerPoint.lat
        }
        this.$cavGdMap(option, res => {
          this.params.bdistrange = res
        })
      },
      copyText(link) { // 复制url
        let oInput = document.createElement('input') // 生成一个节点
        oInput.value = link  // 你要复制的文本
        document.body.appendChild(oInput) // 插入文档
        oInput.select() // 选择对象
        document.execCommand("Copy") // 执行浏览器复制命令
        document.body.removeChild(oInput) //移除标签
        this.$message.success('链接已添加至粘贴板')
      }
    },
    mounted() {
      if (!this.$route.query.id) {
        this.$router.replace({path: '/main/busnt/list'})
      } else {
        this.getShopList()
      }
    }
  }
</script>

<style lang="scss" scoped>
@import "/css/header.scss";
@import "/css/add2.scss";
</style>
